<template>
  <div class="flow-row">
    <div class="flow-branch">
      <!-- <div class="branch-node" @click="!readable && addBranch(node)">
        <img :src="branchPlusIcon"/>
      </div> -->
      <el-button class="branch-node" @click="!readable && addBranch(node)" round>添加条件</el-button>
      <div class="meet-node"></div>
      <div class="flow-col" v-for="(branch, index) in node.branchs" :key="branch.id" >
        <div class="clear-left-border" v-if="index == 0"></div>
        <div class="clear-right-border" v-if="node.branchs.length - 1 == index"></div>
        <div class="flow-row">
          <div class="flow-box">
            <!-- 其他情况不支持配置 -->
            <div class="flow-item flow-node-branch" @click="!readable && node.branchs.length - 1 != index && open('flowBranchSetting', branch, node)">
              <div class="flow-node-box" :class="{ 'has-error': branch.config.error }">
                <div class="node-name">
                  <EditName v-model:value="branch.name"/>
                  <div class="node-name-level" v-if="branch.config.showPriorityLevel">
                    优先{{ branch.config.priorityLevel }}
                  </div>
                </div>
                <div class="node-main">
                  <span v-if="branch.config.content">
                    {{ branch.config.content }}
                  </span>
                  <span v-else class="hint-title">配置筛选条件</span>
                </div>
                <!-- 错误提示 -->
                <!--                <a-icon v-if="conditionNode.error" type="exclamation-circle" theme="filled" class="node-error" />-->
                <i v-if="branch.error" type="exclamation-circle" theme="filled" class="node-error el-icon-warning-outline" ></i>
                <!-- 删除按钮,其他情况不支持删除 -->
                <div v-if="!readable && !branch.config.deletable && node.branchs.length - 1 != index" class="close-icon" >
                  <el-icon  class="el-icon-circle-close" @click.stop="delNode(branch)" ><CircleClose/></el-icon> 
                </div>
                <!-- 删除提示 -->
                <DeleteConfirm :node="branch" />
              </div>
            </div>
            <FlowAddNode
              :node="node"
              @update:node="node = $event"
              :nodeType="3"
              :id="branch.id"
              :readable="readable"
            />
          </div>
        </div>
        <FlowNode
          v-if="branch.childNode && branch.childNode.hasOwnProperty('name')"
          :node="branch.childNode"
          :readable="readable"
        />
      </div>
    </div>
    <div class="after-branch-btn">
      <FlowAddNode
        :node="node"
        @update:node="node = $event"
        :nodeType="4"
        :readable="readable"
      />
    </div>
    <FlowConditionDrawer ref="flowConditionDrawer" @close="isActive = false" />
  </div>
</template>
<script setup name="FlowConditionNode">
import FlowNode from "./FlowNode.vue";
import FlowAddNode from "../flowAddNode.vue";
import FlowConditionDrawer from "../drawer/FlowConditionDrawer.vue";
import EditName from "../../../common/EditName.vue";
import DeleteConfirm from "../../../common/DeleteConfirm.vue";
import flowhook from "../../../mixins/flowhook";
import {
  reactive,
  ref,
  createApp,
  
  
  computed,
  onMounted,
  toRefs,
} from "vue";
import { useStore } from "vuex";
/* 组件局部注册 */
const store = useStore();

const { nameClass, branchPlusIcon} = flowhook();

const flowConditionDrawer = ref(null);

const isActive = ref(false);

const props = defineProps({
  node: {
    type: Object,
    default: function () {
      return {};
    },
  },
  readable: {
    type: Boolean,
    default: false,
  },
});

/**
 * 添加分支节点
 * @param {*} node
 */

const addBranch = (node) => {
  console.log("store------------------dispatch:", store);
  store.dispatch("process/addBranch", node);
};

const open = (name, node, routeNode) => {
  console.log("------开始提示-------");
  isActive.value = true;
  flowConditionDrawer.value.showDrawer(node, routeNode);
};
const delNode = (node) => {
  store.dispatch("process/delNode", node);
}

</script>
